<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{poss}}</div>
    <div v-text="add"></div>
    <div id="gd-map"></div>
    <div>测试分支</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      poss: {},
      add: '',
      msg: 'Welcome to Your Vue.js App',
    };
  },

  mounted() {
    let that = this;
    //getCurrentPosition(成功时的回调函数，错误时的回调函数，可选的配置对象)
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        console.log('获取地理位置成功：', pos.coords);
        // 1.重新复制
        this.poss = {
          longtitude: pos.coords.longitude,
          latitude: pos.coords.latitude,
        };
        //逆地理编码，通过经纬度获取地理位置信息
        // console.log('AMap:::Map：', AMap);
        AMap.plugin('AMap.Geocoder', function () {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: '010',
          });

          var lnglat = [pos.coords.longitude, pos.coords.latitude];
          console.log('经纬度是：', lnglat);

          geocoder.getAddress(lnglat, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // result为对应的地理位置详细信息
              console.log('你所在的位置是：', result);
              that.add = result.regeocode.formattedAddress;
            }
            console.log('逆地理编码的结果是：', result);
          });
        });

        //绘制地图
        let map = new AMap.Map('gd-map', {
          zoom: 15,
          center: [pos.coords.longitude, pos.coords.latitude],
        });
        //  //2.对已存在的属性赋值
        //   this.poss.longtitude = pos.coords.longitude;
        //   this.poss.latitude = pos.coords.latitude;
      },
      (err) => {
        console.log('获取地理位置失败：', err);
      }
    );
  },
  watch: {
    poss(val) {
      console.log('poss的值发生变化:', val);
    },
  },
};
</script>
<style scoped>
#gd-map {
  width: 100%;
  height: 400px;
}
</style>
